<!DOCTYPE html>
<html>

<head>
  <title>基本房间信息管理</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/system.css">
  <link rel="icon" href="../favicon.ico">
  <script src="../js/bootstrap.js"></script>
  <script src="../js/ajax.js"></script>
  <script src="../js/checkLogin.js"></script>
  <script src="../js/jquery.min.js"></script>
  <link rel="stylesheet" href="../font/iconfont.css">
  <script src="../font/iconfont.js"></script>

</head>

<body>

  <main>
    <h1 class="visually-hidden">Sidebars examples</h1>

    <div class="d-flex flex-column flex-shrink-0 p-3 bg-primary text-white" style="width: 220px;">
      <span class="fs-4"> <span class="iconfont icon-jiudianzhusu" style="font-size:24px ;"></span>five HOTEL</span>
      <hr>
      <ul class="nav nav-pills flex-column mb-auto">
        <li class="nav-item">
          <a href="./home.html" class="nav-link active">
            <span class="iconfont icon-zhuye"></span> &nbsp;主页
          </a>
        </li>
        <li>
          <a href="./roomMessage.html" class="nav-link text-white">
            <span class="iconfont icon-yingyongzhongxin"></span> &nbsp;基本房间信息管理
          </a>
        </li>
        <li>
          <a href="./roomSortMessage.html" class="nav-link text-white">
            <span class="iconfont icon-yingyongzhongxin"> &nbsp;房间分类信息管理
          </a>
        </li>
        <li>
          <a href="./order.html" class="nav-link text-white">
            <span class="iconfont icon-yingyongzhongxin"> 订单管理
          </a>
        </li>
        <li>
          <a href="./custmoer.html" class="nav-link text-white">
            <span class="iconfont icon-yingyongzhongxin"> &nbsp;顾客信息管理
          </a>
        </li>
        <li>
          <a href="./employee.html" class="nav-link text-white">
              <span class="iconfont icon-yingyongzhongxin"> &nbsp;员工信息管理
          </a>
      </li>
        <li>
          <a href="./updatePssword.html" class="nav-link text-white">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-key"
              viewBox="0 0 16 16">
              <path
                d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z" />
              <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
            </svg> &nbsp;账户管理
          </a>
        </li>
      </ul>
      <hr>  
    </div>

    <div class="b-example-divider" style="width:calc(100% - 220px);overflow: hidden;">
      <div class="header"
        style="width: 100%; height:66px;line-height: 66px; background-color:#0d6efd; overflow: hidden;">
        <div class="row">
          <div class="col-lg-3" style="color:#fff; font-size:30px; padding-left:20px;">
            <span class="fs-4"> <svg class="icon" aria-hidden="true" style="width:50px;height:50px;">
                <use xlink:href="#icon-jiudianzhusu"></use>
              </svg></span>
          </div>
          <div class="col-lg-5" style="text-align: center;"><span style="background: linear-gradient(to bottom,#f0610e, #e8771a, #fff34a);-webkit-background-clip: text;color: transparent; font-size: 25px;">FIVE
              HOTEL 后台管理系统</span>
          </div>
          <div class="col-lg-4" style="color:#fff; font-size:25px;padding-right: 35px;text-align: right;">欢迎你！
            <img src="../img/avatar.jpg" style="width: 40px; border-radius:35%;"> 坤哥&emsp;
            <button type="button" class="btn btn-danger btn-sm">退出</button>
          </div>
        </div>
      </div>
      <div style="width: 80%;margin:20px auto 0;">
        <div class="row">
          <!-- 添加房间 -->
          <div class="col-lg-2" style="width: 90px; padding: 0;">
            <button class="btn btn-primary" style="margin-bottom:20px" data-bs-toggle="modal"
              data-bs-target="#myModalAdd" onclick="getRoomtypeInfo()">添加房间</button>
          </div>
          <!-- 所有房间 -->
          <div class="col-lg-2" style="width: 114px;">
            <button class="btn btn-primary" style="margin-bottom:20px"onclick="renderAllRoomInfo()">所有房间</button>
          </div>
          <!-- 输入地址查询房间地址 -->
          <div class="col-lg-3" style="padding:0px;width: 214px; position:relative;">
            <input type="text" style="height: 39px; width: 120px; position: absolute;" placeholder="请输入房间地址" id="likeAddress">
            <button class="btn btn-primary" style="width: 80px; position: absolute; margin-bottom: 20px; left: 120px" onclick="queryLikeAddress()">查询</button>
          </div>
          <!-- 下拉查询房型 -->
          <div class="col-lg-2" style="padding:0px; position:relative;">
            <select name="" style="height: 39px; width: 120px; position: absolute;" id="changeType1" onchange="changeType()">
              <option value="">请选择房型</option>
              <option value="1">经济房</option>
              <option value="2">大床房</option>
              <option value="3">双床房</option>
              <option value="4">商务房</option>
              <option value="5">亲子房</option>
              <option value="6">豪华房</option>
              <option value="7">棋牌室</option>
              <!-- <option value="8">全部房间</option> -->
            </select>
          </div>
          <div class="col-lg-3"></div>
        </div>

        <table class="table table-striped">
          <thead>
            <tr>
              <th style="padding-left:50px;">房间号</th>
              <th style="padding-left:20px;">房型</th>
              <th>房间状态</th>
              <th>房价</th>
              <th style="padding-left:50px;">操作</th>
            </tr>
          </thead>
          <tbody id="rtbody">
          </tbody>
        </table>
        <!-- 分页 -->
        <div id="page" style="display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;">
          <button class="btn btn-info" onclick="first()" id="first">首页</button>
          <button class="btn btn-info" onclick="up()" id="prev">上一页</button>
          <span id="showPage" style="margin-left:10px;">1/4</span>
          <button class="btn btn-info" onclick="down()" id="next">下一页</button>
          <button class="btn btn-info" onclick="last()" id="last">尾页</button>
        </div>
      </div>
      <!-- 添加的模态框 -->
      <div>
        <div class="modal fade" id="myModalAdd">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">

              <!-- 模态框头部 -->
              <div class="modal-header">
                <h4 class="modal-title">添加房间</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
              </div>

              <!-- 模态框内容 -->
              <div class="modal-body">
                <form>
                  <div class="row" style="margin-bottom:10px">
                    <div class="col-lg-3">
                      <span style="font-size: 22px; margin-left:5px;">房间号</span>
                    </div>
                    <div class="col-lg-9">
                      <input type="number" class="form-control" id="roomAddress" placeholder="请输入房间号">
                    </div>
                  </div>

                  <div class="row" style="margin-bottom:10px">
                    <div class="col-lg-3">
                      <span style="font-size: 22px; margin-left:5px;">房间类型</span>
                    </div>
                    <div class="col-lg-9">
                      <select id="roomType" style="margin-top: 6px;width: 90px;">
                        <option>请选择</option>
                        <!-- <option value="1">一班</option>
                        <option value="2">二班</option>
                        <option value="3">三班</option> -->
                      </select>
                    </div>
                  </div>

                  <div class="row" style="margin-bottom:10px">
                    <div class="col-lg-3">
                      <span style="font-size: 22px; margin-left:5px;">房间状态</span>
                    </div>
                    <div class="col-lg-9" style="line-height:32px">
                      <label><input type="radio" checked class="roomStatus" name="status" value="未入住">未入住</label>&nbsp;
                      <label><input type="radio" class="roomStatus" name="status" value="已入住">已入住</label>
                    </div>
                  </div>

                  <div class="row" style="margin-bottom:10px">
                    <div class="col-lg-3">
                      <span style="font-size: 22px; margin-left:5px;">房间价格</span>
                    </div>
                    <div class="col-lg-9">
                      <input type="text" class="form-control" id="price" placeholder="请输入房间价格">
                    </div>
                  </div>
                </form>
              </div>

              <!-- 模态框底部 -->
              <div class="modal-footer">
                <button type="button" class="btn btn-success" onclick="addRoomInfo()">确定</button>
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
              </div>
            </div>
          </div>
        </div>
      </div>


      <!-- 修改模态框 -->
      <div>
        <div class="modal" id="myModalEdit">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <input type="hidden" id="updateroomId">
              <!-- 模态框头部 -->
              <div class="modal-header">
                <h4 class="modal-title">修改房间信息</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
              </div>
              <!-- 模态框内容 -->
              <div class="modal-body">
                <form>
                  <div class="row" style="margin-bottom:10px">
                    <div class="col-lg-3">
                      <span style="font-size: 22px; margin-left:5px;">房间号</span>
                    </div>
                    <div class="col-lg-9">
                      <input type="text" class="form-control" id="updateroomAddress" placeholder="请输入房间号">
                    </div>
                  </div>

                  <div class="row" style="margin-bottom:10px">
                    <div class="col-lg-3">
                      <span style="font-size: 22px; margin-left:5px;">房间类型</span>
                    </div>
                    <div class="col-lg-9">
                      <select id="updateroomType" style="margin-top: 6px;width: 90px;">
                        <option>请选择</option>
                        <!-- <option value="1">一班</option>
                                        <option value="2" >二班</option>
                                        <option value="3">三班</option> -->
                      </select>
                    </div>
                  </div>

                  <div class="row" style="margin-bottom:10px">
                    <div class="col-lg-3">
                      <span style="font-size: 22px; margin-left:5px;">房间状态</span>
                    </div>
                    <div class="col-lg-9" style="line-height:32px">
                      <label><input type="radio" checked class="updateStatus" name="status"
                          value="未入住">未入住</label>&nbsp;
                      <label><input type="radio" class="updateStatus" name="status" value="已入住">已入住</label>
                    </div>
                  </div>

                  <div class="row" style="margin-bottom:10px">
                    <div class="col-lg-3">
                      <span style="font-size: 22px; margin-left:5px;">房间价格</span>
                    </div>
                    <div class="col-lg-9">
                      <input type="text" class="form-control" id="updatePrice" placeholder="请输入房间价格">
                    </div>
                  </div>
                </form>
              </div>
              <!-- 模态框底部 -->
              <div class="modal-footer">
                <button type="button" class="btn btn-success" onclick="updateRoomInfo()">确认</button>
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <script src="../js/roomMessage.js"></script>
</body>

</html>